<!-- 检查管理结果查询 -->
<template>
    <div class="check-result-container">
      <h1>检查结果查询</h1>
      <div class="search-section">
        <input v-model="searchId" placeholder="请输入挂号单号" />
        <input v-model="searchName" placeholder="请输入患者姓名" />
        <button @click="searchResults">查询</button>
      </div>
      <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="itemId" label="挂号单号" width="" />
    <el-table-column prop="patientName" label="患者姓名" width="" />
    <el-table-column prop="checkItemName" label="检查项目" />
    <el-table-column prop="resultStatus" label="状态">
      <template #default="scope">{{ scope.row.resultStatus==1?"检查完成":"" }}</template>
    </el-table-column>
    <el-table-column prop="resultMsg" label="检查结果"/>
    <el-table-column prop="createTime" label="创建时间">
      <template #default="scope">{{ formatDate(scope.row.createTime, 'YYYY年MM月DD日 HH:mm') }}</template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="success" @click="chakjg(scope.$index, scope.row)" plain>查看结果</el-button>       
      </template>
    </el-table-column>
  </el-table>
      <div class="pagination">
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[1, 2, 3]" :size="size"
          :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div> 
   <!-- 查看结果 -->
     <!-- 录入结果模态框 -->
  <el-dialog v-model="dialogTableVisible" :title="'录入'+name+'结果'" width="500" center>
    <!-- 主体文本类容 -->
 结果： <el-input
    v-model="gridData.resultMsg"
    style="width: 240px"
    disabled
    placeholder="没有录入结果"
  />
<br><br>
<!-- 图片 -->
<el-button @click="handleClick">
  点击放大图片
</el-button>
      <br>
      <el-image
        ref="imageRef"
        style="width: 100px; height: 100px"
        :src="gridData.resultImg"
        show-progress
        fit="cover"
         :preview-src-list="srcList"
      />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogTableVisible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  </template> 

  
  
  <script lang="ts" setup>
    import http from '@/http'
import { ref,reactive,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize,TableInstance } from 'element-plus'
import { formatDate } from '@/utils/dateFormatter'
import type { ImageInstance } from 'element-plus'
// int pageNum,int pageSize,String searchIdName,String searchId
let dialogTableVisible=ref(false)
let searchName=ref('')
let searchId=ref('')
 // 当前页
 let pageNum=ref(1)
// 显示几页
let pageSize=ref(4)
// 总数据
let tableData=ref([])
      // 总条数
      let total=ref()
      const background = ref(false)
      const size = ref<ComponentSize>('default')
      const disabled = ref(false)
// 分页方法
const handleSizeChange = (val: number) => {
  getPage();
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  getPage();
  console.log(`current page: ${val}`)
}
let getPage=()=>{
  //查询所有的项目
  http.get("/checklist/getAll",
  {params:{
    pageNum:pageNum.value,
    pageSize:pageSize.value,
    searchName:searchName.value,
    searchId:searchId.value
    
  }}).then((res)=>{
    console.log(res)
    tableData.value=res.list
    console.log(tableData.value)
    total.value=res.total
  })
 } 
//加载事件总查询 
onMounted(()=>{
  getPage();
})
// 查询按钮
let searchResults=()=>{
  getPage();
}
// 开始检查
let gridData=ref({
  resultImg:'',
  resultMsg:'',
})
let name=ref('')
let srcList=ref([])
let chakjg=(index: number, row)=>{
  name.value=row.patientName
  gridData.value.resultImg=row.resultImg
  gridData.value.resultMsg=row.resultMsg
  dialogTableVisible.value=true
  srcList.value=row.resultImg
}

const imageRef = ref<ImageInstance>()
const handleClick = () => {
  imageRef.value!.showPreview()
}
  // export default {
  //   data() {
  //     return {
  //       registrationNumber: '',
  //       patientName: '',
  //       results: [
  //         { id: 'ITEM1807273355287670016', projectName: '便常规', patientName: '平者行', status: '检测完成', result: '没问题', createdAt: '2024/6/30 12:46:04' },
  //         { id: 'ITEM1806571914268755648', projectName: '尿常规', patientName: '唐军鹏', status: '检测完成', result: '正常', createdAt: '2024/6/28 14:17:54' },
  //         { id: 'ITEM1806510021257854976', projectName: 'CT', patientName: '牛马', status: '检测完成', result: '正常', createdAt: '2024/6/28 10:14:36' },
  //         { id: 'ITEM1805444030700584960', projectName: '便常规', patientName: '关冷卉', status: '检测完成', result: '正常没有异常', createdAt: '2024/6/25 14:28:01' },
  //         { id: 'ITEM1805421289146548224', projectName: 'X光', patientName: '辛舌冰夏', status: '检测完成', result: '没问题', createdAt: '2024/6/25 10:29:37' },
  //         { id: 'ITEM1805411891690995712', projectName: 'X光', patientName: '辛舌冰夏', status: '检测完成', result: '没问题', createdAt: '2024/6/25 09:32:15' }
  //       ],
  //       currentPage: 1,
  //       itemsPerPage: 6
  //     };
  //   },
  //   computed: {
  //     filteredResults() {
  //       return this.results.filter(item => {
  //         return (this.registrationNumber ? item.id.includes(this.registrationNumber) : true) &&
  //                (this.patientName ? item.patientName.includes(this.patientName) : true);
  //       }).slice((this.currentPage - 1) * this.itemsPerPage, this.currentPage * this.itemsPerPage);
  //     }
  //   },
  //   methods: {
  //     searchResults() {
  //       this.currentPage = 1;
  //     },
  //     viewResult(item) {
  //       alert(`查看结果: ${item.result}`);
  //     },
  //     prevPage() {
  //       if (this.currentPage > 1) {
  //         this.currentPage--;
  //       }
  //     },
  //     nextPage() {
  //       if (this.currentPage * this.itemsPerPage < this.results.length) {
  //         this.currentPage++;
  //       }
  //     }
  //   }
  // };
  </script>
  
  <style>
  .check-result-container {
    padding: 20px;
  }
  
  .search-section {
    margin-bottom: 20px;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  
  th {
    background-color: #f2f2f2;
  }
  
  .pagination {
    margin-top: 20px;
    text-align: center;
  }
  
  button {
    margin: 0 5px;
  }
  </style>